<template>
	<view class="flex">
		<scroll-view scroll-y="true" style="width: 30%;"
			:style="{'background-color':leftBgColor,'font-size':leftFs+'rpx'}">
			<view v-for="(item,index) in viewList" class="text-overflow flex py-20 pr-20 align-center"
				@click="leftClick(index,item)" :class="activeIndex==index?'selected':''">
				<view style="width: 8rpx;height: 50rpx;"
					:style="{'background-color':activeIndex==index?leftSelected:''}"></view>
				<view class="pl-20" :style="{color:activeIndex==index?leftSelectedColor:''}">
					{{item.title}}
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y="true" :scroll-with-animation="true" :scroll-into-view="position" style="width: 70%;"
			@scroll="scroll_detail"
			:style="{ height:scrollHeight + 'rpx','background-color':rightBgColor,'font-size':rightFs+'rpx'}">
			<view v-for="(item,index) in viewList"
				:style="{'min-height': index==viewList.length-1? scrollHeight+5+'rpx':''}">
				<view class="" :id="'sv-'+index">
					<view class="flex align-center py-20" style="color: #999999;">
						<view style="width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #999999;"
							class="ml-20"></view>
						<text class="ml-20">{{item.title}}</text>
					</view>
					<view v-for="(it,idx) in item.list" @click="rightClick(it)" class="py-20 ml-20">
						{{it}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "gjs-scrollView",
		props: {
			//左右列表
			viewList: {
				type: Array,
				default: []
			},
			//scroll-view的高度
			scrollHeight: {
				type: Number,
				default: 1200
			},
			//左边区域的背景色
			leftBgColor: {
				type: String,
				default: '#F6F6F6'
			},
			//右边区域的背景色
			rightBgColor: {
				type: String,
				default: '#FFFFFF'
			},
			//左边区域的字体大小(最好不改)
			leftFs: {
				type: Number,
				default: 32
			},
			// //右边区域的字体大小(最好不改)
			rightFs: {
				type: Number,
				default: 32
			},
			//左边选中的颜色
			leftSelected: {
				type: String,
				default: '#FC4646'
			},
			leftSelectedColor: {
				type: String,
				default: '#FC4646'
			}
		},
		data() {
			return {
				activeIndex: 0,
				position: 'sv-0',
				// leftFs: 32,
				// rightFs: 32,
				list: [],
			};
		},
		mounted() {
			this.list = []
			this.list.push(0)
			for (let i = 0; i < this.viewList.length - 1; i++) {
				let vlist = this.viewList[i].list
				let top = (vlist.length + 1) * 41 + this.list[i]
				this.list.push(top)
			}
			console.log(this.list);
		},
		methods: {
			leftClick(e, item) {
				this.activeIndex = e
				this.position = 'sv-' + e
				this.$emit('leftClick', item.title)
			},
			rightClick(e) {
				this.$emit('rightClick', e)
			},
			scroll_detail(e) {
				let top = e.detail.scrollTop
				for (let i = 0; i < this.list.length; i++) {
					if (i == this.list.length - 1 && top >= this.list[i]) {
						this.activeIndex = i
					} else if (top >= this.list[i] && top < this.list[i + 1]) {
						this.activeIndex = i
					}
				}
			}
		}
	}
</script>

<style>
	@import url("./common.scss");

	.flex {
		display: flex;
		flex-direction: row;
	}

	.selected {
		background-color: #FFFFFF;
	}

	/* 超出部分显示... */
	.text-overflow {
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	.align-center {
		align-items: center;
	}
</style>
